<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教材版本管理 - 题库系统</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        success: '#36D399',
                        warning: '#FBBD23',
                        danger: '#F87272',
                        dark: '#3D4451',
                        'gray-light': '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scale-in {
                animation: scaleIn 0.3s ease forwards;
            }
            .scale-out {
                animation: scaleOut 0.3s ease forwards;
            }
            .fade-in {
                animation: fadeIn 0.3s ease forwards;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
        }

        @keyframes scaleIn {
            0% { transform: scale(0.95); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes scaleOut {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.95); opacity: 0; }
        }
        
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-700 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-30">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <button id="sidebar-toggle" class="md:hidden text-gray-500 hover:text-primary">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <div class="flex items-center">
                    <i class="fa fa-book text-primary text-2xl mr-2"></i>
                    <h1 class="text-xl font-bold text-primary">题库系统</h1>
                </div>
            </div>
            
            <div class="flex items-center space-x-6">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="全局搜索..." class="w-64 pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary relative">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                    <div class="hidden md:block">
                        <p class="text-sm font-medium">张老师</p>
                        <p class="text-xs text-gray-500">管理员</p>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 侧边栏 -->
        <!--<aside id="sidebar" class="w-64 bg-white shadow-md z-20 transform transition-transform duration-300 lg:translate-x-0 -translate-x-full fixed lg:relative h-[calc(100vh-64px)] overflow-y-auto">
            <div class="p-4">
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-3">
                        <h2 class="text-sm font-medium text-gray-500 uppercase tracking-wider">主菜单</h2>
                        <button class="text-xs text-primary hover:text-primary/80">
                            <i class="fa fa-cog"></i>
                        </button>
                    </div>
                    
                    <nav>
                        <ul class="space-y-1">
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-home w-5 text-center mr-3"></i>
                                    <span>首页</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-primary bg-primary/10 transition-colors">
                                    <i class="fa fa-book w-5 text-center mr-3"></i>
                                    <span>教材管理</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-question-circle w-5 text-center mr-3"></i>
                                    <span>试题管理</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-list-alt w-5 text-center mr-3"></i>
                                    <span>试卷管理</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-bar-chart w-5 text-center mr-3"></i>
                                    <span>统计分析</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-users w-5 text-center mr-3"></i>
                                    <span>用户管理</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                    <i class="fa fa-cog w-5 text-center mr-3"></i>
                                    <span>系统设置</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                
                <div class="mb-6">
                    <h2 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-3">最近访问</h2>
                    <ul class="space-y-1">
                        <li>
                            <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                <i class="fa fa-clock-o w-5 text-center mr-3"></i>
                                <span>人教版 - 数学 - 一年级上册</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                <i class="fa fa-clock-o w-5 text-center mr-3"></i>
                                <span>人教版 - 语文 - 一年级上册</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-100 transition-colors">
                                <i class="fa fa-clock-o w-5 text-center mr-3"></i>
                                <span>苏教版 - 数学 - 一年级上册</span>
                            </a>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h2 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-3">快捷操作</h2>
                    <button class="w-full flex items-center justify-center px-3 py-2 rounded-lg bg-primary text-white text-sm hover:bg-primary/90 transition-colors">
                        <i class="fa fa-plus mr-2"></i>
                        <span>新建教材版本</span>
                    </button>
                </div>
            </div>
        </aside>-->

        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="mb-6 flex items-center text-sm">
                    <a href="#" class="text-gray-500 hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                    <a href="#" class="text-gray-500 hover:text-primary">教材管理</a>
                    <i class="fa fa-angle-right mx-2 text-gray-400"></i>
                    <span class="text-gray-700">教材版本列表</span>
                </div>
                
                <!-- 页面标题 -->
                <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between">
                    <div>
                        <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">教材版本列表</h1>
                        <p class="text-gray-500 mt-1">管理所有学科的教材版本、章节和知识点</p>
                    </div>
                    
                    <div class="mt-4 md:mt-0 flex space-x-3">
                        <div class="relative">
                            <select class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
                                <option>全部学科</option>
                                <option>数学</option>
                                <option>语文</option>
                                <option>英语</option>
                                <option>物理</option>
                                <option>化学</option>
                                <option>生物</option>
                            </select>
                            <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                        </div>
                        
                        <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                            <i class="fa fa-plus mr-2"></i>
                            <span>新建教材</span>
                        </button>
                    </div>
                </div>
                
                <!-- 搜索和筛选区域 -->
                <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4">
                        <div class="relative flex-1">
                            <input type="text" placeholder="搜索教材名称、章节或知识点..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        
                        <div class="flex flex-wrap gap-2">
                            <button class="px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors flex items-center">
                                <i class="fa fa-filter mr-2 text-gray-500"></i>
                                <span>筛选</span>
                            </button>
                            
                            <button class="px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors flex items-center">
                                <i class="fa fa-sort mr-2 text-gray-500"></i>
                                <span>排序</span>
                            </button>
                            
                            <button class="px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors flex items-center">
                                <i class="fa fa-download mr-2 text-gray-500"></i>
                                <span>导出</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 教材版本列表 -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    <!-- 教材卡片 1 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-primary"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">数学</span>
                                        <span class="ml-2 text-xs text-gray-500">人教版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级上册</h3>
                                    <p class="text-sm text-gray-500 mt-1">共12章 | 156个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-06-15</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 教材卡片 2 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-secondary"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-secondary/10 text-secondary text-xs px-2 py-1 rounded-full">语文</span>
                                        <span class="ml-2 text-xs text-gray-500">人教版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级上册</h3>
                                    <p class="text-sm text-gray-500 mt-1">共10章 | 120个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-06-20</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 教材卡片 3 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-warning"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-warning/10 text-warning text-xs px-2 py-1 rounded-full">英语</span>
                                        <span class="ml-2 text-xs text-gray-500">人教版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级起点</h3>
                                    <p class="text-sm text-gray-500 mt-1">共8章 | 96个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-06-10</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 教材卡片 4 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-primary"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">数学</span>
                                        <span class="ml-2 text-xs text-gray-500">苏教版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级上册</h3>
                                    <p class="text-sm text-gray-500 mt-1">共11章 | 143个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-05-28</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 教材卡片 5 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-secondary"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-secondary/10 text-secondary text-xs px-2 py-1 rounded-full">语文</span>
                                        <span class="ml-2 text-xs text-gray-500">部编版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级上册</h3>
                                    <p class="text-sm text-gray-500 mt-1">共12章 | 132个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-06-05</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 教材卡片 6 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow border border-gray-100">
                        <div class="h-3 bg-primary"></div>
                        <div class="p-6">
                            <div class="flex items-start justify-between mb-4">
                                <div>
                                    <div class="flex items-center mb-2">
                                        <span class="bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">数学</span>
                                        <span class="ml-2 text-xs text-gray-500">北师大版</span>
                                    </div>
                                    <h3 class="text-lg font-semibold text-gray-800">一年级上册</h3>
                                    <p class="text-sm text-gray-500 mt-1">共10章 | 120个知识点</p>
                                </div>
                                <div class="flex space-x-1">
                                    <button class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-100 transition-colors">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between mt-5 pt-5 border-t border-gray-100">
                                <div class="flex items-center space-x-2">
                                    <span class="text-xs text-gray-500">更新于</span>
                                    <span class="text-xs text-gray-700">2025-05-20</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-primary p-1.5 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                        <i class="fa fa-eye"></i>
                                    </button>
                                    <button class="text-gray-500 hover:text-danger p-1.5 rounded hover:bg-danger/10 transition-colors" title="删除">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 章节和知识点详情 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
                    <div class="border-b border-gray-100 p-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <h2 class="text-lg font-semibold text-gray-800">人教版 - 数学 - 一年级上册</h2>
                            <span class="ml-3 bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">当前选中</span>
                        </div>
                        <div class="flex space-x-3">
                            <button class="px-4 py-2 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors flex items-center">
                                <i class="fa fa-refresh mr-2 text-gray-500"></i>
                                <span>刷新</span>
                            </button>
                            <button class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center">
                                <i class="fa fa-plus mr-2"></i>
                                <span>添加章节</span>
                            </button>
                        </div>
                    </div>
                    
                    <div class="flex flex-col md:flex-row">
                        <!-- 章节树 -->
                        <div class="md:w-1/3 border-r border-gray-100 p-4">
                            <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-3">章节结构</h3>
                            
                            <div class="space-y-1 max-h-[500px] overflow-y-auto">
                                <!-- 章节 1 -->
                                <div class="chapter-item">
                                    <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <div class="flex items-center">
                                            <i class="fa fa-book text-primary mr-3"></i>
                                            <span class="font-medium">第一章 准备课</span>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="pl-9 space-y-1">
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>1.1 数一数</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-2 rounded-lg bg-primary/5 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-primary mr-3"></i>
                                                <span>1.2 比多少</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 章节 2 -->
                                <div class="chapter-item">
                                    <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <div class="flex items-center">
                                            <i class="fa fa-book text-primary mr-3"></i>
                                            <span class="font-medium">第二章 位置</span>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="pl-9 space-y-1 hidden">
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>2.1 上、下、前、后</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>2.2 左、右</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 章节 3 -->
                                <div class="chapter-item">
                                    <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <div class="flex items-center">
                                            <i class="fa fa-book text-primary mr-3"></i>
                                            <span class="font-medium">第三章 1-5的认识和加减法</span>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="pl-9 space-y-1 hidden">
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>3.1 1-5的认识</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>3.2 比大小</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>3.3 第几</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 章节 4 -->
                                <div class="chapter-item">
                                    <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <div class="flex items-center">
                                            <i class="fa fa-book text-primary mr-3"></i>
                                            <span class="font-medium">第四章 认识图形（一）</span>
                                        </div>
                                        <div class="flex space-x-1">
                                            <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="pl-9 space-y-1 hidden">
                                        <div class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                                            <div class="flex items-center">
                                                <i class="fa fa-file-text-o text-gray-500 mr-3"></i>
                                                <span>4.1 认识立体图形</span>
                                            </div>
                                            <div class="flex space-x-1">
                                                <button class="text-gray-400 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 添加章节按钮 -->
                                <button class="w-full mt-2 flex items-center justify-center px-3 py-2 rounded-lg border border-dashed border-gray-300 text-gray-500 hover:border-primary hover:text-primary transition-colors">
                                    <i class="fa fa-plus mr-2"></i>
                                    <span>添加章节</span>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 知识点列表 -->
                        <div class="md:w-2/3 p-4">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wider">知识点列表 - 1.2 比多少</h3>
                                <div class="flex space-x-3">
                                    <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors flex items-center text-sm">
                                        <i class="fa fa-filter mr-1 text-gray-500"></i>
                                        <span>筛选</span>
                                    </button>
                                    <button class="px-3 py-1.5 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center text-sm">
                                        <i class="fa fa-plus mr-1"></i>
                                        <span>添加知识点</span>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-gray-50 rounded-lg p-4 mb-6">
                                <div class="flex items-start space-x-4">
                                    <div class="bg-primary/10 text-primary p-2 rounded-lg">
                                        <i class="fa fa-info-circle text-xl"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-medium text-gray-800">章节信息</h4>
                                        <p class="text-sm text-gray-600 mt-1">本章主要内容：让学生通过观察、操作，初步感知"多"、"少"的含义，学会用一一对应的方法比较物体的多少。</p>
                                        <div class="flex items-center mt-3 text-sm">
                                            <div class="flex items-center mr-4">
                                                <i class="fa fa-bookmark-o text-gray-500 mr-1"></i>
                                                <span class="text-gray-600">知识点数量：12</span>
                                            </div>
                                            <div class="flex items-center">
                                                <i class="fa fa-question-circle-o text-gray-500 mr-1"></i>
                                                <span class="text-gray-600">关联试题：48</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">知识点名称</th>
                                            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">重要性</th>
                                            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">试题数量</th>
                                            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr class="hover:bg-gray-50 transition-colors">
                                            <td class="px-4 py-3 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium text-gray-900">一一对应比较法</div>
                                                        <div class="text-xs text-gray-500">通过一一对应的方法比较物体的多少</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                    简单
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                    中等
                                                </span>
                                            </td>
                                            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                                8
                                            </td>
                                                                                    <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex space-x-2">
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">数量比较词</div>
                                                    <div class="text-xs text-gray-500">理解"多"、"少"、"同样多"等数量比较词汇</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                简单
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                中等
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            6
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex space-x-2">
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">比较方法应用</div>
                                                    <div class="text-xs text-gray-500">能够运用比较方法解决实际问题</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                中等
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                重要
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            12
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex space-x-2">
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">比较符号使用</div>
                                                    <div class="text-xs text-gray-500">理解并使用大于(>)、小于(<)和等于(=)符号</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                中等
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                中等
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            10
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex space-x-2">
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900">多与少的相对性</div>
                                                    <div class="text-xs text-gray-500">理解数量比较的相对性概念</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                                较难
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                                中等
                                            </span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                            7
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <div class="flex space-x-2">
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                    <i class="fa fa-pencil"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- 试题列表 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
                    <div class="border-b border-gray-100 p-4 flex items-center justify-between">
                        <div class="flex items-center">
                            <h2 class="text-lg font-semibold text-gray-800">关联试题</h2>
                            <span class="ml-3 bg-primary/10 text-primary text-xs px-2 py-1 rounded-full">共48题</span>
                        </div>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <select class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors text-sm">
                                    <option>全部题型</option>
                                    <option>单选题</option>
                                    <option>多选题</option>
                                    <option>判断题</option>
                                    <option>填空题</option>
                                    <option>解答题</option>
                                </select>
                                <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                            </div>
                            <button class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center text-sm">
                                <i class="fa fa-plus mr-2"></i>
                                <span>添加试题</span>
                            </button>
                        </div>
                    </div>
                    
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">试题ID</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">试题内容</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        QT-00123
                                    </td>
                                    <td class="px-4 py-3 max-w-xs">
                                        <div class="text-sm text-gray-900 line-clamp-2">观察图片，比较苹果和香蕉的数量，哪种水果多？</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            单选题
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            简单
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        2025-06-15
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        QT-00124
                                    </td>
                                    <td class="px-4 py-3 max-w-xs">
                                        <div class="text-sm text-gray-900 line-clamp-2">小明有3个苹果，小红有5个苹果，谁的苹果多？多几个？</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                            解答题
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            中等
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        2025-06-16
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        QT-00125
                                    </td>
                                    <td class="px-4 py-3 max-w-xs">
                                        <div class="text-sm text-gray-900 line-clamp-2">在"3○5"的○里填上正确的符号。</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            填空题
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            简单
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        2025-06-17
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        QT-00126
                                    </td>
                                    <td class="px-4 py-3 max-w-xs">
                                        <div class="text-sm text-gray-900 line-clamp-2">判断：5比3多，3比5少。（对/错）</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">
                                            判断题
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                            简单
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        2025-06-18
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        QT-00127
                                    </td>
                                    <td class="px-4 py-3 max-w-xs">
                                        <div class="text-sm text-gray-900 line-clamp-2">小红有4个气球，小华有7个气球，小华比小红多几个气球？</div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                            解答题
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                            中等
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                                        2025-06-19
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex space-x-2">
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="编辑">
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-primary p-1 rounded hover:bg-primary/10 transition-colors" title="查看详情">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="text-gray-500 hover:text-danger p-1 rounded hover:bg-danger/10 transition-colors" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-200">
                        <div class="flex-1 flex justify-between sm:hidden">
                            <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                上一页
                            </a>
                            <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                下一页
                            </a>
                        </div>
                        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700">
                                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">48</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left"></i>
                                    </a>
                                    <a href="#" aria-current="page" class="z-10 bg-primary text-white relative inline-flex items-center px-4 py-2 border border-primary text-sm font-medium">
                                        1
                                    </a>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                        2
                                    </a>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                        3
                                    </a>
                                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                                        ...
                                    </span>
                                    <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                        10
                                    </a>
                                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right"></i>
                                    </a>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // 侧边栏切换
    document.getElementById('sidebar-toggle').addEventListener('click', function() {
        const sidebar = document.getElementById('sidebar');
        sidebar.classList.toggle('-translate-x-full');
    });
    
    // 章节折叠/展开功能
    document.querySelectorAll('.chapter-item').forEach(chapter => {
        const header = chapter.querySelector(':scope > div');
        const content = chapter.querySelector(':scope > div + div');
        const icon = header.querySelector('.fa');
        
        if (content) {
            header.addEventListener('click', () => {
                content.classList.toggle('hidden');
                icon.classList.toggle('fa-angle-right');
                icon.classList.toggle('fa-angle-down');
            });
        }
    });
    
    // 展开/收起所有章节
    document.getElementById('expand-all').addEventListener('click', function() {
        document.querySelectorAll('.chapter-item').forEach(chapter => {
            const content = chapter.querySelector(':scope > div + div');
            const icon = chapter.querySelector('.fa');
            
            if (content && content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                icon.classList.remove('fa-angle-right');
                icon.classList.add('fa-angle-down');
            }
        });
    });
    
    document.getElementById('collapse-all').addEventListener('click', function() {
        document.querySelectorAll('.chapter-item').forEach(chapter => {
            const content = chapter.querySelector(':scope > div + div');
            const icon = chapter.querySelector('.fa');
            
            if (content && !content.classList.contains('hidden')) {
                content.classList.add('hidden');
                icon.classList.remove('fa-angle-down');
                icon.classList.add('fa-angle-right');
            }
        });
    });
    
    // 题型切换功能
    document.getElementById('question-type').addEventListener('change', function() {
        const type = this.value;
        const optionsContainer = document.getElementById('options-container');
        
        // 根据题型显示/隐藏选项区域
        if (type === 'single' || type === 'multiple' || type === 'judge') {
            optionsContainer.classList.remove('hidden');
        } else {
            optionsContainer.classList.add('hidden');
        }
        
        // 根据题型调整选项内容
        if (type === 'judge') {
            // 判断题只显示A(对)和B(错)两个选项
            const optionItems = document.querySelectorAll('.option-item');
            optionItems.forEach((item, index) => {
                if (index < 2) {
                    item.classList.remove('hidden');
                    const optionLabel = item.querySelector('.text-xs.font-medium');
                    optionLabel.textContent = index === 0 ? '选项 A (对)' : '选项 B (错)';
                } else {
                    item.classList.add('hidden');
                }
            });
            
            // 隐藏添加选项按钮
            document.getElementById('add-option-btn').classList.add('hidden');
        } else if (type === 'single' || type === 'multiple') {
            // 单选题和多选题显示所有选项
            const optionItems = document.querySelectorAll('.option-item');
            optionItems.forEach((item, index) => {
                item.classList.remove('hidden');
                const optionLabel = item.querySelector('.text-xs.font-medium');
                optionLabel.textContent = `选项 ${String.fromCharCode(65 + index)}`;
            });
            
            // 显示添加选项按钮
            document.getElementById('add-option-btn').classList.remove('hidden');
        }
    });
    
    // 添加选项按钮
    document.getElementById('add-option-btn').addEventListener('click', function() {
        const optionsContainer = document.querySelector('#options-container .space-y-3');
        const optionCount = optionsContainer.querySelectorAll('.option-item').length;
        const newOptionLetter = String.fromCharCode(65 + optionCount);
        
        const newOption = document.createElement('div');
        newOption.className = 'option-item flex items-start space-x-3 scale-in';
        newOption.innerHTML = `
            <div class="mt-1">
                <input type="radio" name="option" value="${newOptionLetter}" class="w-4 h-4 text-primary focus:ring-primary">
            </div>
            <div class="flex-1">
                <div class="border border-gray-200 rounded-lg overflow-hidden">
                    <div class="p-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                        <span class="text-xs font-medium text-gray-500">选项 ${newOptionLetter}</span>
                        <button class="text-gray-400 hover:text-red-500 text-sm delete-option">
                            <i class="fa fa-times"></i>
                        </button>
                    </div>
                    <div class="p-3">
                        <div contenteditable="true" class="min-h-[50px] text-sm focus:outline-none"></div>
                    </div>
                </div>
            </div>
        `;
        
        optionsContainer.appendChild(newOption);
        
        // 为新添加的选项绑定删除事件
        newOption.querySelector('.delete-option').addEventListener('click', function() {
            newOption.classList.add('scale-out');
            setTimeout(() => {
                newOption.remove();
                updateOptionLabels();
            }, 300);
        });
        
        // 更新选项的类型（单选/多选）
        updateOptionTypes();
    });
    
    // 删除选项
    document.querySelectorAll('.delete-option').forEach(button => {
        button.addEventListener('click', function() {
            const optionItem = this.closest('.option-item');
            optionItem.classList.add('scale-out');
            setTimeout(() => {
                optionItem.remove();
                updateOptionLabels();
            }, 300);
        });
    });
    
    // 更新选项标签（A、B、C等）
    function updateOptionLabels() {
        const optionItems = document.querySelectorAll('.option-item');
        optionItems.forEach((item, index) => {
            const optionLetter = String.fromCharCode(65 + index);
            const optionLabel = item.querySelector('.text-xs.font-medium');
            optionLabel.textContent = `选项 ${optionLetter}`;
            item.querySelector('input').value = optionLetter;
        });
    }
    
    // 更新选项类型（单选/多选）
    function updateOptionTypes() {
        const questionType = document.getElementById('question-type').value;
        const inputs = document.querySelectorAll('.option-item input');
        
        inputs.forEach(input => {
            input.type = questionType === 'multiple' ? 'checkbox' : 'radio';
        });
    }
    
    // 监听题型变化，更新选项类型
    document.getElementById('question-type').addEventListener('change', updateOptionTypes);
    
    // 题干字数统计
    const questionContent = document.getElementById('question-content');
    const questionLength = document.getElementById('question-length');
    
    questionContent.addEventListener('input', function() {
        const length = this.textContent.length;
        questionLength.textContent = length;
        
        if (length > 500) {
            questionLength.classList.add('text-red-500');
        } else {
            questionLength.classList.remove('text-red-500');
        }
    });
    
    // 保存试题按钮
    document.getElementById('save-question-btn').addEventListener('click', function() {
        // 显示加载状态
        this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 保存中...';
        this.disabled = true;
        
        // 模拟保存操作
        setTimeout(() => {
            // 显示成功提示
            this.innerHTML = '<i class="fa fa-check mr-2"></i> 保存成功';
            this.classList.remove('bg-primary');
            this.classList.add('bg-success');
            
            // 3秒后恢复原状
            setTimeout(() => {
                this.innerHTML = '<i class="fa fa-check mr-2"></i> 保存并添加下一题';
                this.classList.remove('bg-success');
                this.classList.add('bg-primary');
                this.disabled = false;
            }, 3000);
        }, 1500);
    });
    
    // 取消按钮
    document.getElementById('cancel-btn').addEventListener('click', function() {
        if (confirm('确定要取消吗？未保存的内容将丢失。')) {
            window.history.back();
        }
    });
</script>
</body>
</html>